<template>
  <router-link 
    :to="to" 
    v-slot="{ navigate }"
    custom
  >
    <a 
      :href="to"
      @click.prevent="handleClick(navigate)"
      class="nav-item"
      :class="{ 'router-link-active': isExactActive && !disableActive }"
    >
      <slot></slot>
    </a>
  </router-link>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  to: {
    type: String,
    required: true
  },
  disableActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const route = useRoute()
const isExactActive = computed(() => {
  // 检查当前路由的activeMenu属性
  const activeMenu = route.meta.activeMenu
  // 如果存在activeMenu，则使用它来判断是否激活
  if (activeMenu) {
    return activeMenu === props.to
  }
  // 否则使用常规路径匹配
  return route.path === props.to
})

const handleClick = (navigate) => {
  navigate()
  emit('click')
}
</script>

<style scoped>
/* 样式将继承父组件 */
</style> 